<!DOCTYPE html>
<%@page import="com.silknet.db.DBOperations"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled</title>
<style type="text/css">
html {
	background-color: #f7f7f7;
}

body {
	width: 800px;
	margin: 10px auto;
	padding: 10px 30px;
	background-color: #fff;
	border: 1px dashed #888;
}

ul.tree,ul.tree * {
	list-style-type: none;
	margin: 0;
	padding: 0 0 5px 0;
}

ul.tree img.arrow {
	padding: 2px 0 0 0;
	border: 0;
	width: 20px;
}

ul.tree li {
	padding: 4px 0 0 0;
}

ul.tree li ul {
	padding: 0 0 0 20px;
	margin: 0;
}

ul.tree label {
	cursor: pointer;
	font-weight: bold;
	padding: 2px 0;
}

ul.tree label.hover {
	color: red;
}

p {
	margin: 5px 15px;
}

ul {
	margin-top: 5px;
	margin-bottom: 5px;
}

ul.tree li .arrow {
	width: 20px;
	height: 20px;
	padding: 0;
	margin: 0;
	cursor: pointer;
	float: left;
	background: transparent no-repeat 0 4px;
}

ul.tree li .collapsed {
	background-image: url(collapsed.gif);
}

ul.tree li .expanded {
	background-image: url(expanded.gif);
}

ul.tree li .checkbox {
	width: 20px;
	height: 18px;
	padding: 0;
	margin: 0;
	cursor: pointer;
	float: left;
	background: url(check0.gif) no-repeat 0 0px;
}

ul.tree li .checked {
	background-image: url(check2.gif);
}

ul.tree li .half_checked {
	background-image: url(check1.gif);
}
</style>
</head>
<script src="jquery-1.2.6.min.js" type="text/javascript"></script>
<script src="jquery.checktree.js" type="text/javascript"></script>
<script>
	$(document).ready(function() {
		$("ul.tree").checkTree({
		/*
		// You can add callbacks to the expand, collapse, check, uncheck, and  halfcheck
		// events of the tree. The element you use as the argument is the LI element of
		// the object that fired the event.
		onExpand: function(el) {
			console.log("expanded ", el.find("label:first").text());
		},
		onCollapse: function(el) {
			console.log("collapsed ", el.find("label:first").text());
		},
		onCheck: function(el) {
			console.log("checked ", el.find("label:first").text());
		},
		onUnCheck: function(el) {
			alert("un checked ", el.find("label:first").text());
			console.log("un checked ", el.find("label:first").text());
		},
		onHalfCheck: function(el) {
			console.log("half checked ", el.find("label:first").text());
		}*/
		/*
		// You can set the labelAction variable to either "check" or "expand" 
		// to change what happens when you click on the label item.
		// The default is expand, which expands the tree. Check will toggle
		// the checked state of the items.
		labelAction: "expand"
		 */
		/*
		// You can also change what happens when you hover over a label (over and out)
		onLabelHoverOver: function(el) { alert("You hovered over " + el.text()); },
		onLabelHoverOut: function(el) { alert("You hovered out of " + el.text()); }
		 */
		});
	});
</script>
<body>
	<%
		//out.print(DBOperations.getMenu());
	%>
</body>
</html>
